<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>跳转到小程序</title>
    <!-- 引入微信JS-SDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="./utils/common.js"></script>
    <style lang="less">
        body {
            margin: 0;
            background-image: linear-gradient(rgba(110, 198, 253, 0.4), rgba(110, 198, 253, 0.2), rgba(110, 198, 253, 0));
        }

        .button-wrapper {
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;


        }

        #jumpBtn {
            font-size: 4em;
            background-color: #297EFF;
            color: white;
            border-color: #ffffff;
            border-radius: 50pt;
            padding: 50px;
            margin-bottom: 100px;
        }
        .loading-container {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .loading-spinner {
            border: 16px solid #f3f3f3;
            border-top: 16px solid #3498db;
            border-radius: 50%;
            width: 120px;
            height: 120px;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<div class="button-wrapper">
    <!--    <button id="jumpBtn">点击绑定手机号</button>-->
    <div class="loading-container">
        <div class="loading-spinner"></div>
    </div>
    <wx-open-launch-weapp
            id="launch-btn"
            appid="wx26d0959a95fe9661"
            username="gh_bad15cb66367"
            path="pages/user/getPhone"
    >
        <template>
            <style>.btn {
                font-size: 3em;
                background-color: #00a0ec;
                color: white;
                border-color: #ffffff;
                border-radius: 10pt;
                padding: 30px;
                margin-bottom: 100px;


            }</style>
            <button class="btn" id="jumpBtn">点击跳转APP进行绑定</button>
        </template>
    </wx-open-launch-weapp>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // getWxConfig();
        getWxCode();
    });


    function getWxConfig() {
        //获取微信JS-SDK配置用于打开小程序
        let api = '/App/User/GetsignatureList';
        let data = {
            url: window.location.href.replace(/#.*$/, '')
            // url: window.location.href
        };
        console.log('请求传参：', data)
        ajax('get', api, data, (data) => {
            data = data.data;
            let config = {
                debug: false,
                appId: 'wx5cc8c0419df1e40d',
                timestamp: data.timestamp,
                nonceStr: data.noncestr,
                signature: data.signature,
                jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表
                openTagList: ['wx-open-launch-weapp']
            };
            console.log('config:', config)
            wx.config({
                ...config
            });
            wx.ready((e) => {
                console.log(e)
                document.querySelector(".loading-container").remove();
            })
            // wx.ready(() => {
            // document.querySelector("#jumpBtn").addEventListener("click", function () {
            // wx.navigateToMiniProgram({
            //     appId: 'wx26d0959a95fe9661',//小程序的appid
            //     path: '/pages/login/login',//小程序的首页路径
            //     success: function () {
            //         console.log('跳转成功');
            //     },
            //     fail: function (res) {
            //         console.log('跳转失败', res.errMsg);
            //     }
            // });
            // });
            // });
            // wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            // console.log('error:', res)
            // });
        }, (e) => {
            if (confirm("请重新进入该网页！")) {
                document.querySelector(".loading-container").remove();
                WeixinJSBridge.call('closeWindow');
            }
        });
    }


    function getOpenId(code) {
        let api = '/App/User/GetOpenId';
        let data = {code: code};
        ajax('get', api, data, (res) => {
            let info = res.data;
            if (info.openid) {
                let wxDom = document.querySelector('wx-open-launch-weapp');
                wxDom.setAttribute('path', wxDom.getAttribute('path') + '?openId='+info.openid);
                getWxConfig();
            }else{
                if (confirm("请重新进入该网页！")) {
                    document.querySelector(".loading-container").remove();
                    WeixinJSBridge.call('closeWindow');
                }
            }
        }, () => {
            if (confirm("请重新进入该网页！")) {
                document.querySelector(".loading-container").remove();
                WeixinJSBridge.call('closeWindow');
            }
        });
    }


    function getWxCode() {
        var code_ = '';
        let isWechat = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
        if (true) {
            let appid = getAppId();//"wx5cc8c0419df1e40d";
            let code = this.getUrlCode().code; //是否存在code
            let local = window.location.href;//.split('http://')[1]||window.location.href.split('https://')[1];

            if (code == null || code === "") {//snsapi_base,snsapi_userinfo
                let href =
                    "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
                    appid +
                    "&redirect_uri=" +
                    encodeURIComponent(local) +
                    "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect";
                //不存在就打开上面的地址进行授权
                window.location.href = href;
            } else {
                code_ = code;
                console.log('code_:' + code_);
                getOpenId(code_);
            }
        }
    }

    function getAppId() {
        let hostname = window.location.hostname;
        console.log(hostname);
        if (hostname === 'ryx.asrj.net') {
            return 'wx98e98c67122a469d'
        } else {
            return 'wx5cc8c0419df1e40d'//傲视
        }
    }


</script>
</body>
</html>

